//高德地图设置
window._AMapSecurityConfig = {
	securityJsCode: "4cf95ab4cdae16545e0f28aa52c68e2b",
};
const AMapLoader = require("@amap/amap-jsapi-loader");

/**
 * 页脚插件：为当前页面添加页脚部分
 * @param {Number} activeName 当前激活页的索引
 */
function footerPlugin(activeIndex = 0) {
	const ul = document.createElement("ul");
	ul.className = "foot dpflex";
	ul.innerHTML = `<li class="flex1 dpflex fdcolumn ${
		activeIndex === 0 ? "active" : ""
	}">
                    <a class='dpflex fdcolumn' href='./index.html'>
                    <span class="iconfont icon-shouye-shouye"></span>
                    <span>首页</span>
                    </a>
                </li>

                <li class="flex1 dpflex fdcolumn ${
									activeIndex === 1 ? "active" : ""
								}">
                    <a class='dpflex fdcolumn' href='./run.html'>
                    <span class="iconfont icon-xinlv"></span>
                    <span>运动</span>
                    </a>
                </li>


                <li class="flex1 dpflex fdcolumn ${
									activeIndex === 3 ? "active" : ""
								}">
                    <a class='dpflex fdcolumn' href='./user.html'>
                    <span class="iconfont icon-yonghu-yuan"></span>
                    <span>我的</span>
                    </a>
                </li>`;
	// 渲染到页面中
	document.body.append(ul);
}
/**
 * 选项卡切换功能
 * @param {String} selControl 选项卡选项的容器选择器 如：ul
 * @param {String} [conControl] 选项卡内容的容器选择器 如：ul
 */
function tabControl(selControl, conControl) {
	const sel = document.querySelector(selControl);
	let cont = null;
	// 判断是否有cont
	if (conControl) {
		cont = document.querySelector(conControl);
	}
	// 记录上一次激活项
	let ind = 0;
	// 为所有选择器添加点击事件，用于切换
	for (let i = 0; i < sel.children.length; ++i) {
		sel.children[i].addEventListener("click", function () {
			// 删除上一次选中项样式
			sel.children[ind].classList.remove("active");
			// 添加当前激活样式
			sel.children[i].classList.add("active");
			// 判断是否有cont
			if (cont) {
				cont.children[ind].classList.remove("active");
				cont.children[i].classList.add("active");
			}
			ind = i;
		});
	}
}
/**
 * 地图显示
 * @param {String}  container 地图容器id
 */
function displayMap(container = "map") {
	//高德地图插件
	AMapLoader.load({
		key: "3d27c2d6ab2aa3ef82e2aab483380359", // 申请好的Web端开发者Key，首次调用 load 时必填
		version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
		plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
	})
		.then(function () {
			// 初始化地图
			map = new AMap.Map(container, {
				zoom: 19, //级别
				center: [104.064209, 30.541669], //坐标
			});
			// 高精度定位
			AMap.plugin("AMap.Geolocation", function () {
				var geolocation = new AMap.Geolocation({
					enableHighAccuracy: true, //是否使用高精度定位，默认:true
					timeout: 10000, //超过10秒后停止定位，默认：5s
					position: "RB", //定位按钮的停靠位置
					buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
					zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
				});
				map.addControl(geolocation);
				geolocation.getCurrentPosition();
			});
		})
		.catch(function () {
			// console.log(e);
		});
}

/**
 * 补零函数，对不满足指定位数长度的整数进行前置补零
 * @param {Number} n 需要补零的整数值
 * @param {Number} l 指定位数，补零后的总位数 如3位：001; 默认为2位
 */
function fillZero(n, l = 2) {
	for (i = Math.pow(10, l - 1); n < i; i /= 10) {
		n = "0" + n;
	}
	return n;
}
// console.log( fillZero(10, 3) )

/**
 * @param {String} boxEle 外层盒子选择器
 * @param {Number} index 当前激活下标
 */
function movementTopNav(boxEle, index = 0) {
	const ul = document.createElement("ul");
	ul.className = "selector dpflex";
	ul.innerHTML = `
        <li ${
					index === 0 ? 'class="active"' : ""
				}><a href="./run.html"> 跑步</a> </li>
        <li ${
					index === 1 ? 'class="active"' : ""
				}><a href="./cycling.html">骑行</a></li>
        <li ${
					index === 2 ? 'class="active"' : ""
				}><a href="./course.html">课程训练</a></li>
  `;
	document.querySelector(boxEle).prepend(ul);
}
/**
 * 添加显示页面的顶部导航
 * @param {String} boxEle   容器的选择器
 * @param {Number} index    激活项的下标
 */

function disCircleTop(boxEle, index = 0) {
	const div = document.createElement("div");
	div.className = "q-head mlr15 dpflex";
	div.innerHTML = `
                <p class="top-nav flex1 dpflex">
                    <a href="./attention.html" ${
											index === 0 ? 'class="active"' : ""
										}>关注</a>
                    <a href="./nearby.html" ${
											index === 1 ? 'class="active"' : ""
										}>附近</a>
                    <a href="./collect.html" ${
											index === 2 ? 'class="active"' : ""
										}>收藏</a>
                    <a href="./nearby.html" ${
											index === 3 ? 'class="active"' : ""
										}>个人动态</a>
                </p>
                <button id="addBtn" class="add-btn cfff f12" type="button">添加+</button>`;
	document.querySelector(boxEle).prepend(div);
	document.querySelector("#addBtn").addEventListener("click", function () {
		location.href = "./dynamic.html";
	});
}

// 导出
module.exports = {
	footerPlugin,
	tabControl,
	displayMap,
	fillZero,
	movementTopNav,
	disCircleTop,
};
